<template>
  <div class="pages recharge-details">
    <div class="pageLevel">
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form :rules="rules">
          <el-row :gutter="10">
            <el-col style="width: 450px">
              <el-form-item label="交易时间:" label-width="100px">
                <el-date-picker size="small" v-model="selectdata.transactionTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col style="width: 280px" v-if="isShop != 0">
              <el-form-item label="充值渠道:" label-width="100px">
                <el-select filterable size="small" style="width:180px" v-model="selectdata.channel" placeholder="全部">
                  <el-option v-for="(item, index) in channel" :key="index" :label="item.name" :value="item.id"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col style="width: 280px">
              <el-form-item label="充值方式:" label-width="100px">
                <el-select filterable size="small" style="width:180px" v-model="selectdata.mode" placeholder="全部">
                  <el-option v-for="(item,index) in mode" :key="index" :label="item.name" :value="item.id"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col style="width: 280px">
              <el-form-item label="会员手机号:" label-width="100px">
                <el-input class="input" v-model="selectdata.keyWord" size="small" placeholder="请输入查询的会员手机号"></el-input>
              </el-form-item>
            </el-col>
            <el-col style="width: 280px" v-if="isShop != 0">
              <el-form-item label="门店:" label-width="100px">
                <el-select filterable size="small" style="width:180px" v-model="selectdata.storeId" placeholder="全部">
                  <el-option v-for="(item,index) in storeLists" :key="index" :label="item.name" :value="item.id"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col style="width: 250px">
              <el-form-item label="" label-width="100px">
                <el-button type="primary" size="mini" @click="searchSelect" class="Button">查询</el-button>
              </el-form-item>
              <el-form-item label="" label-width="10px" v-if="setRole('导出')">
                <el-button type="primary" size="mini" class="Button" @click="download">导出</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <p class="accountingAmount">入账金额: {{accountingAmount}}</p>
        <el-table :data="dataList" stripe style="width: 100%">
          <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
          <el-table-column prop="createTime" :formatter="createTime" label="交易时间" align="center" width="200"></el-table-column>
          <el-table-column prop="iphone" label="会员手机号" align="center"></el-table-column>
          <el-table-column prop="totalPrice" label="充值金额" align="center"></el-table-column>
          <el-table-column prop="fee" label="手续费" align="center"></el-table-column>
          <el-table-column prop="price" label="入账金额" align="center"></el-table-column>
          <el-table-column prop="shopName" v-if="isShop != 0" label="门店" align="center"></el-table-column>
          <el-table-column prop="payChannel" v-if="isShop != 0" label="充值渠道" align="center"></el-table-column>
          <el-table-column prop="payChannel" v-if="soUrce== 5" label="充值渠道" align="center"></el-table-column>
          <el-table-column prop="depositPrice" v-if="isShop == 0&&soUrce!= 5" label="保证金金额" align="center"></el-table-column>
          <el-table-column prop="payType" :formatter="payType" label="充值方式" align="center"></el-table-column>
          <el-table-column prop="accountPrice" label="会员余额" align="center"></el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from "@/util";
import { detailList, selectBaseShopPageList, exportDetailList } from "@/api";
var fileDownload = require("js-file-download");
export default {
  computed: mapState([
    "isShop",
    "merchantId",
    "power",
    "companyName",
    "soUrce"
  ]),
  data() {
    return {
      storeLists: [], // 门店列表
      channel: [
        {
          // 充值渠道
          id: "",
          name: "全部"
        },
        {
          id: "1",
          name: "POS"
        },
        {
          id: "2",
          name: "充值渠道APP"
        }
      ],
      mode: [
        {
          // 充值方式
          id: "",
          name: "全部"
        },
        {
          id: "WECHAT",
          name: "微信"
        },
        {
          id: "ALIPAY",
          name: "支付宝"
        },
        {
          id: "BANKCARD",
          name: "银行卡"
        }
      ],
      selectdata: {
        transactionTime: [], // 交易时间
        channel: "", // 充值渠道
        mode: "", // 充值方式
        keyWord: "", // 会员手机号
        storeId: "" // 门店
      },
      rules: {
        timeStart: [
          { required: false, message: "请输入开始时间", trigger: "change" }
        ],
        timeEnd: [
          { required: false, message: "请输入开始时间", trigger: "change" }
        ]
      },
      dataList: [], //列表数据
      //   分页
      pageSize: 10,
      totalItems: 0,
      currentPage: 1,
      exportData: {},
      accountingAmount: "" // 入账金额
    };
  },
  mounted() {
    if (this.isShop != 0) {
      this.warehouseList();
    } else {
      this.mode.push({
        id: "CASH",
        name: "现金"
      });
    }
    this.data();
  },
  methods: {
    //  交易时间
    createTime: function(row) {
      return util.foryear(row.createTime) + " " + util.fortime(row.createTime);
    },
    payType: function(row) {
      switch (row.payType) {
        case "INIT":
          return "初始金额";
        case "WECHAT":
          return "微信";
          break;
        case "ALIPAY":
          return "支付宝";
          break;
        case "BANKCARD":
          return "银行卡";
        case "CASH":
          return "现金";
          break;
      }
    },
    data(picker) {
      //  获取今天日期
      const currentDate = new Date();
      var currentDates = currentDate.setTime(currentDate.getTime());
      var transactionDate = util.foryear(parseInt(currentDates));
      this.selectdata.transactionTime.push(transactionDate);
      this.selectdata.transactionTime.push(transactionDate);
      this.tableget(this.pageSize, 1);
    },
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    // 获取表格数据
    tableget(pageSize, pageNum) {
      if (!this.selectdata.transactionTime) {
        this.selectdata.transactionTime = ["", ""];
      }
      let dailySales = {
        isShop: this.isShop,
        orgId: this.merchantId,
        startTime: this.selectdata.transactionTime[0],
        endTime: this.selectdata.transactionTime[1],
        payType: this.selectdata.mode,
        pageChannel: this.selectdata.channel,
        memberPhone: this.selectdata.keyWord,
        shopId: this.selectdata.storeId,
        pageNum: pageNum,
        pageSize: pageSize,
        isDeposit: false
      };
      this.exportData = {
        isShop: this.isShop,
        orgId: this.merchantId,
        startTime: this.selectdata.transactionTime[0],
        endTime: this.selectdata.transactionTime[1],
        payType: this.selectdata.mode,
        pageChannel: this.selectdata.channel,
        memberPhone: this.selectdata.keyWord,
        shopId: this.selectdata.storeId,
        isDeposit: false
      };
      detailList(dailySales).then(res => {
        this.dataList = res.data.detailList;
        this.totalItems = res.data.totalPage;
        this.currentPage=pageNum
        this.accountingAmount = res.data.totalAmount;
        this.currentPage=pageNum
      });
    },
    // 搜索
    searchSelect() {
      this.tableget(this.pageSize, 1);
    },
    //跳页
    toPage() {
      this.tableget(this.pageSize, 1);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage=1;
      this.tableget(val, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.tableget(this.pageSize, val);
    },
    // 门店列表
    warehouseList() {
      selectBaseShopPageList({
        businessId: this.merchantId,
        type: 3
      }).then(res => {
        let a = {
          id: "",
          name: "全部"
        };
        res.data.list.unshift(a);
        this.storeLists = res.data.list;
      });
    },
    // 导出
    download() {
      if (this.dataList.length == "0") {
        this.$message.error("数据为空不能导出");
      } else {
        exportDetailList(this.exportData).then(res => {
          let fileName = "储值充值明细.xlsx";
          fileDownload(res, fileName);
        });
      }
    }
  }
};
</script>
<style scoped>
.accountingAmount {
  text-indent: 26px;
  font-size: 18px;
  margin-bottom: 16px;
}
.tableSearch .el-input {
  width: 190px;
}
.tableSearch .el-date-editor {
  width: 350px;
}
</style>
<style>
.outsourcingstatistics .delete .el-input__suffix {
  display: none;
}
.outsourcingstatistics .billdata .el-date-editor .el-range__close-icon {
  display: none;
}
.outsourcingstatistics .el-form-item {
  margin-bottom: 10px;
}
</style>



